import type React from "react";
import { StrictMode, useEffect } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { RouterProvider } from "react-router";
import router from "./routes";
import useAuthStore from "./store/auth";

const queryClient = new QueryClient();

function App({ children }: { children: React.ReactNode }) {
  const auth = useAuthStore();

  useEffect(() => {
    auth.load();
  }, []);

  return <>{children}</>;
}

// Render the app
const rootElement = document.getElementById("root");
if (rootElement && !rootElement.innerHTML) {
  createRoot(rootElement).render(
    <StrictMode>
      <QueryClientProvider client={queryClient}>
        <App>
          <RouterProvider router={router} />
        </App>
      </QueryClientProvider>
    </StrictMode>,
  );
}
